<template>
    <div class="sidebar" >
        <el-menu :collapse-transition="false"  class="menuStyle" :collapse="isCollapse" :router="true">
<!--            侧边栏上部的图标-->
            <el-menu-item class="imgStyle" index="/frontFramework/">
                <img src="../../assets/static/img/sidebar_logo.jpg" alt="MyWorld"  width="30" height="30">
                <span slot="title" style="margin-left: 5px">MyWorld</span>
            </el-menu-item>
<!--            侧边栏内容-->
            <el-submenu index="/backendFramework/" >
                <template slot="title" >
                    <i class="el-icon-notebook-2"></i>
                    <span slot="title">博客</span>
                </template>
                <el-menu-item-group >
                    <el-menu-item index="blog" class="item">博客管理</el-menu-item>
                    <el-menu-item index="1-2" class="item">评论管理</el-menu-item>
                </el-menu-item-group>
<!--                <el-menu-item-group title="分组2">-->
<!--                    <el-menu-item index="1-3" >选项3</el-menu-item>-->
<!--                </el-menu-item-group>-->
<!--                <el-submenu index="1-4">-->
<!--                    <span slot="title">选项4</span>-->
<!--                    <el-menu-item index="1-4-1">选项1</el-menu-item>-->
<!--                </el-submenu>-->
            </el-submenu>
<!--            <el-menu-item index="2">-->
<!--                <i class="el-icon-menu"></i>-->
<!--                <span slot="title">导航二</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="3" disabled>-->
<!--                <i class="el-icon-document"></i>-->
<!--                <span slot="title">导航三</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="4">-->
<!--                <i class="el-icon-setting"></i>-->
<!--                <span slot="title">导航四</span>-->
<!--            </el-menu-item>-->
        </el-menu>

    </div>

</template>

<script>
    export default {
        name: "SidebarComponent",
        props:{
            //侧边栏是否折叠
            isCollapse: Boolean,
        },
        data() {
            return {
            };
        },
        methods: {
        }

    }
</script>

<style scoped>
    .sidebar{
        height: 100vh;
        width: 100%;
        display: flex;
    }
    .imgStyle{
        width: 100%;
    }
    .menuStyle{
        width: calc(100% - 1px);
    }

    .item{
        min-width: 192px;
    }





</style>
